<template>
    <div class="box-content">
        <div class="navigation"><span class="route_back" @click="$router.go(-1)">客户列表</span>/通话记录</div>
        <!--搜索-->
        <div class="mt-3">
            <div>
                <!--<el-input-->
                        <!--class="mrt-10"-->
                        <!--style="width: 160px;"-->
                        <!--placeholder="请输入行业名"-->
                        <!--v-model="searchParams.name"-->
                        <!--clearable>-->
                <!--</el-input>-->
                <!--<el-button type="primary" @click="onSearch">查询</el-button>-->
            </div>
        </div>
        <!--表格-->
        <div class="mt-3">
            <el-table
                    :data="recordData"
                    v-loading="loading"
                    align="center"
                    :element-loading-text="loadText"
                    :header-cell-style="tableHeaderColor"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="序号"
                        align="center"
                        width="80"
                >
                </el-table-column>
                <el-table-column
                        prop="info.who_call.id"
                        label="坐席号"
                        align="center"
                        width="80"
                >
                </el-table-column>
                <el-table-column
                        prop="info.who_call.name"
                        label="坐席名"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        prop="info.phone"
                        label="客户手机"
                        align="center"
                        width="120"
                >
                </el-table-column>
                <!--<el-table-column-->
                        <!--prop="caller_status_link"-->
                        <!--label="通话状态"-->
                        <!--align="center"-->
                        <!--&gt;-->
                    <!--<template slot-scope="scope">-->
                        <!--<div align="center">{{scope.row.last_bridge_to_link?scope.row.last_bridge_to_link.callee_status_link:''}}</div>-->
                    <!--</template>-->
                <!--</el-table-column>-->
                <el-table-column
                        prop="billsec"
                        label="通话时长(s)"
                        align="center"
                        >
                </el-table-column>
                <el-table-column
                        label="开始时间"
                        align="center"

                >
                    <template slot-scope="scope">
                        <div align="center">{{scope.row['created_at']?scope.row['created_at'].slice(0, 11):'无'}}</div>
                        <div align="center">{{scope.row['created_at']?scope.row['created_at'].slice(11 ):'无'}}</div>
                    </template>
                </el-table-column>

                <el-table-column
                        label="操作"
                        fixed="right"
                        align="center"
                        width="400"
                >
                    <template slot-scope="scope">
                        <!--<audio  controls="controls" preload="auto"  :id="'audio' + scope.row.id"></audio>-->
                        <audio controls v-if="isShow && scope.row.wavlog" style="height: 40px;">
                            <source :src="http + scope.row.wavlog" type="audio/ogg">
                            <source :src="http + scope.row.wavlog" type="audio/mpeg">
                            <source :src="http + scope.row.wavlog" type="audio/wav">
                            您的浏览器不支持 audio 元素。
                        </audio>
                        <div v-else>无通话记录</div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="mt-3 float-right">
                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageInfo.current_page"
                        :page-size="pageInfo.per_page"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageInfo.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "recordList",
        data() {
            return {
                searchParams: {
                    name: ''
                },
                loading:false,
                loadText:'数据加载中',
                searchStr:'',
                pageInfo: {
                    per_page: 10,
                    total: 0,
                    current_page: 1,
                },
                isShow: false,
                recordData: [],
                http: process.env.VUE_APP_API_HOST
            }
        },
        created() {
            this.getFileList();
        },
        methods: {
            getFileList() {
                this.loading = true;
                this.$http.get('api/admin/express/phone',{
                    params: {
                        pageSize: this.pageInfo.per_page,
                        page: this.pageInfo.current_page
                    }
                })
                    .then((result)=>{
                        this.isShow = true;
                        this.recordData = result.data;
                        this.pageInfo.total = result.meta.total;
                        this.loading = false;
                    })
                    .catch((err) => {
                        this.loading = false;
                        this.$message.warning(err.data.msg || "数据异常，请重试");
                    })
            },
            // onSearch() {
            //     this.searchStr = "";
            //     if (this.searchParams.name) {
            //         this.addConStr();
            //         this.searchStr+=`name=${this.searchParams.name}`;
            //     }
            //     this.pageInfo.current_page = 1;
            //     this.getFileList();
            // },
            // addConStr() {
            //     if (this.searchStr.length > 0) {
            //         this.searchStr += '&';
            //     } else {
            //         this.searchStr += '?';
            //     }
            // },
            handleSizeChange(val) {
                this.pageInfo.current_page = 1;
                this.pageInfo.per_page = val;
                this.getFileList();
            },
            handleCurrentChange(val) {
                this.isShow = false;
                this.recordData = [];
                this.pageInfo.current_page = val;
                this.getFileList();
            },
            tableHeaderColor({row, column, rowIndex, columnIndex}) {
                if (rowIndex === 0) {
                    return 'background-color: #FAFAFA;color: #000;font-weight: 500;height:54px;font-size:14px'
                }
            },
        }
    }
</script>

<style scoped lang="less">
    .route_back:hover{
        cursor: pointer;
        color: #409EFF;
        text-decoration: underline;
    }
</style>